<template>
    <div>
        <div class="e-table" style="background-color: #fff">
            <div class="top">
                <div class="left">
                    <div class="select_box">
                        <el-button size="small" class="btn-greenYellow" >刷新</el-button>
                    </div>
                </div>
                 <div class="right">
                    <div style="margin-left:20px">
                        <el-input
                            placeholder="输入结构部位名称、物资名称搜索"
                            size="small"
                            v-model="searchKey"
                            @blur="onSearch"
                        >
                            <img src="@/assets/search.png" slot="suffix" @click="onSearch" />
                        </el-input>
                    </div>
                </div>
            </div>
            <div class="e-table">
                <el-table v-show="!isSearch"
                    ref="tableRef"
                    key="tableRef"
                    border
                    style="width: 100%"
                    row-key="uuid"
                    :data="tableData"
                    :tree-props="{
                        children: 'children',
                    }"
                    default-expand-all
                    lazy
                    :row-class-name="tableRowClassName"
                    class="table"
                    v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'tableRef' }"
                >
                    <el-table-column prop="structureName" label="结构部位名称" min-width="220"></el-table-column>
                    <el-table-column prop="materialName" label="物资名称" min-width="220"></el-table-column>
                    <el-table-column prop="unit" align="center" label="单位" width="120"></el-table-column>
                    <el-table-column prop="spec" align="center" label="规格" width="120"></el-table-column>
                    <el-table-column align="center"  label="理论消耗">
                        <el-table-column  label="截止上期末数量"  align="right"  width="200">
                            <template slot-scope="{ row }">
                                <span>{{treeUpSummary(row,'prevTotalQuantity')}}</span>
                                <!-- <span>{{row.prevTotalQuantity}}</span> -->
                                <!-- <historyUpdateTable
                                    :typeVal="typeVal"
                                    @clickIcon="clickIcon(row.numberRecords)"
                                    :historyTable="historyTableData"
                                /> -->
                            </template>
                        </el-table-column>
                        <el-table-column label="本期数量"  align="right"  width="200">
                            <template slot-scope="{ row }">
                                 <span>{{treeUpSummary(row,'settlementQuantity')}}</span>
                                 <!-- <span>{{row.settlementQuantity}}</span> -->
                                <!-- <historyUpdateTable
                                    :typeVal="typeVal"
                                    @clickIcon="clickIcon(row.numberRecords)"
                                    :historyTable="historyTableData"
                                /> -->
                            </template>
                        </el-table-column>
                        <el-table-column  label="截止本期末数量"  align="right"  width="200">
                            <template slot-scope="{ row }">
                            <span>{{treeUpSummary(row,'currentTotalSettlementQuantity')}}</span>
                                 <!-- <span>{{row.currentTotalSettlementQuantity}}</span> -->
                                <!-- <historyUpdateTable
                                    :typeVal="typeVal"
                                    @clickIcon="clickIcon(row.numberRecords)"
                                    :historyTable="historyTableData"
                                /> -->
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { mapMutations } from 'vuex'
// eslint-disable-next-line no-unused-vars
import historyUpdateTable from './historyUpdateTable.vue'
import { getUuid } from '@/utils/common'
// import httpRequest from '@/api/settlementManagement/gongchengjieshuan/gongchengAndzhongqi'
export default {
    props: {
        billid: {
            type: String,
            default: ''
        },
    },
    components: {
        // historyUpdateTable,
    },
    data () {
        return {
            typeVal: 'amount',
            tableData: [],
            mapTableData: {},
            addList: [], // 缓存新增数据
            searchKey: '',
            isSearch: false,
            historyTableData: {},
        }
    },
    computed: {
    },
    created () {
        this.getData()
    },
    mounted () {
    },
    methods: {
        ...mapMutations(
            'contract', ['setMaterialList']
        ),
        ...mapMutations(['setHistoryTableData']),
        // 获取数据
        getData () {
            const list = [
                // {
                //     structureName: '桥梁',
                //     materialName: '',
                //     unit: '',
                //     spec: '',
                //     contractQuantity: 0,
                //     prevTotalQuantity: 0,
                //     settlementQuantity: 0,
                //     currentTotalSettlementQuantity: 0,
                //     parentId: '0',
                //     thisLevelId: '1'
                // },
                // {
                //     structureName: '',
                //     materialName: '钢筋',
                //     unit: '吨',
                //     spec: '200*125',
                //     contractQuantity: 15,
                //     prevTotalQuantity: 0,
                //     settlementQuantity: 854,
                //     currentTotalSettlementQuantity: 854,
                //     parentId: '1',
                //     thisLevelId: '1-1'
                // },
                // {
                //     structureName: '',
                //     materialName: '大理石',
                //     unit: '吨',
                //     spec: '500*325',
                //     contractQuantity: 7,
                //     prevTotalQuantity: 0,
                //     settlementQuantity: 7451,
                //     currentTotalSettlementQuantity: 7451,
                //     parentId: '1',
                //     thisLevelId: '1-2'
                // }
            ]
            list.forEach(item=>{
                const contractQuantity = item.contractQuantity
                item.prevTotalQuantity = this.returnComputedQuantity(item.prevTotalQuantity, contractQuantity)
                item.settlementQuantity = this.returnComputedQuantity(item.settlementQuantity, contractQuantity)
                item.currentTotalSettlementQuantity = this.returnComputedQuantity(item.currentTotalSettlementQuantity, contractQuantity)
                item.uuid = getUuid()
                item.billId = this.billid
            })
            const tree = this.listConversionTree(list, '0')
            this.tableData = tree
        },
        //树向上汇总row为当前数据,key为需要计算的属性
        treeUpSummary (row, key) {
            if(row.children && row.children.length > 0 ) {
                row[key] = row.children.reduce((count, item)=>count + (parseFloat(item[key]) || 0), 0).toFixed(4) * 1
            }
            return row[key]
        },
        //返回计算后的结算数量
        returnComputedQuantity (quantity, contractQuantity) {
            if(quantity && contractQuantity) {
                return  (quantity / contractQuantity).toFixed(4) * 1
            }
            return 0
        },
        //将合同清单数据转为需要的树
        listConversionTree (arr, parentId) {
            const tree = []
            let temp
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].parentId == parentId) {
                    const obj = arr[i]
                    temp = this.listConversionTree(arr, arr[i].thisLevelId)
                    if (temp.length > 0) {
                        obj.children = temp
                    } else {
                        obj.isDetailed = 1 //最子级（树的最底层）为1
                        obj.children = []
                        obj.lowestChild = true
                    }
                    tree.push(obj)
                }
            }
            return tree
        },
        tableRowClassName ({ row }) {
            if(row.changeType === -1) {
                return `class-${row.billId} row-hide`
            }else{
                if(row.changeState === 1) {
                    return `class-${row.billId} green row-show`
                }else if(row.changeState === 2) {
                    return `class-${row.billId} yellow row-show`
                }else if(row.changeState === -1) {
                    return `class-${row.billId} red row-show`
                }else{
                    return `class-${row.billId} row-show`
                }
            }
        },
        onSearch () {

        },
        clickIcon (list) {
            this.setHistoryTableData(list)
        },
    }
}
</script>
<style lang='scss' scoped>
    ::v-deep .hide-icon{
        .el-table__expand-icon{
            display: none;
        }
    }
    ::v-deep.el-table__row{
        .cell{
            display: flex;
            align-items: center;
        }
    }
    ::v-deep .el-popover__reference-wrapper{
        display: flex;
        height: 100%;
    }
    .select_box{display: flex; align-items: center;
        ::v-deep .el-radio-group{display: flex;
            .el-radio{display: flex; align-items: center; margin-right: 10px;}
        }
    }
</style>
